<template>
  <div class="container">
    <navBar
      :title="'作业票详情'"
      :query="queryData"
      :backStep="'mySubmitIndex'"
    ></navBar>
    <div class="workTitle">作业信息</div>
    <div class="formBox">
      <div class="formItem">
        <van-cell title="作业票编号:">
          <template #default>
            <div>{{ formInfoObj?.ticketNo }}</div>
          </template>
        </van-cell>
      </div>

      <div class="formItem">
        <van-cell title="作业内容:">
          <template #default>
            <div>{{ formInfoObj?.workContent }}</div>
          </template>
        </van-cell>
        <van-cell title="作业地点:">
          <template #default>
            <div>{{ formInfoObj.workPlace }}</div>
          </template>
        </van-cell>
        <van-cell title="作业单位:">
          <template #default>
            <div>{{ formInfoObj.applyDeptName }}</div>
          </template>
        </van-cell>
        <van-cell title="作业人:">
          <template #default>
            <div>
              <span v-for="item in specialList" :key="item.id">
                {{ item.name }}
              </span>
            </div>
          </template>
        </van-cell>
        <van-cell title="作业负责人:">
          <template #default>
            <div>{{ formInfoObj.fireSupervisorName }}</div>
          </template>
        </van-cell>
        <van-cell title="开始时间:">
          <template #default>
            <div>{{ formInfoObj.startTime }}</div>
          </template>
        </van-cell>
        <van-cell title="结束时间:">
          <template #default>
            <div>{{ formInfoObj?.endTime }}</div>
          </template>
        </van-cell>
        <!-- <van-cell title="作业监护人:">
          <template #default>
            <div>{{ formInfoObj.guardianOpinion?.[0].peopleName }}</div>
          </template>
        </van-cell>
        <van-cell title="措施制定人:">
          <template #default>
            <div>{{ formInfoObj.measureOpinion?.[0].peopleName }}</div>
          </template>
        </van-cell> -->
        <van-cell title="安全交底人:">
          <template #default>
            <div>{{ formInfoObj.safeInstructor }}</div>
          </template>
        </van-cell>
        <van-cell title="接受交底人:">
          <template #default>
            <div>{{ formInfoObj.acceptInstructor || '' }}</div>
          </template>
        </van-cell>
      </div>

      <div class="formItem">
        <van-cell title="作业级别:">
          <template #default>
            {{ formInfoObj.fireWorkLevelName }}
          </template>
        </van-cell>
        <div class="cellCss">
          <div class="cellCssTitle">作业方式:</div>
          <div>
            <van-checkbox-group
              direction="horizontal"
              shape="square"
              v-model="check"
              disabled
            >
              <van-checkbox
                shape="square"
                v-for="item in workMethodOptions"
                :key="item.id"
                :name="item.name"
                >{{ item.name }}</van-checkbox
              >
            </van-checkbox-group>
          </div>
        </div>
        <van-cell title="关联作业票:">
          <template #default>
            {{ formInfoObj.relateTicketCode }}
          </template>
        </van-cell>
      </div>

      <div class="formItem">
        <div class="cellCss">
          <div class="cellCssTitle">风险辨识结果:</div>
          <div>
            <van-checkbox-group
              direction="horizontal"
              shape="square"
              v-model="check2"
              disabled
            >
              <van-checkbox
                shape="square"
                v-for="item in dangerOptions"
                :key="item.id"
                :name="item.name"
                >{{ item.name }}</van-checkbox
              >
            </van-checkbox-group>
          </div>
        </div>
      </div>
    </div>
    <div class="workTitle">安全措施</div>
    <div class="formBox">
      <div class="formItem">
        <div class="cellCss" @click="showDialog = true">
          <div class="cellCssContent">
            <div class="left">安全措施确认</div>
            <div class="right">></div>
          </div>
        </div>
      </div>
    </div>

    <div class="workTitle">分析项目数据</div>

    <div class="formBox">
      <div
        class="formItem"
        v-for="item in formInfoObj.gasSampleList"
        :key="item.id"
      >
        <van-cell title="分析项目:">
          <template #default>
            {{ item.gasName }}
          </template>
        </van-cell>

        <!-- <van-cell title="合格标准:">
          <template #default>
            <div>{{ item.passStandard }}</div>
          </template>
        </van-cell> -->
        <van-cell title="结果值:">
          <template #default>
            <div>{{ item.analysisResult }}</div>
          </template>
        </van-cell>
        <van-cell title="分析时间:">
          <template #default>
            {{ item.analysisTime }}
          </template>
        </van-cell>
        <div class="cellCss">
          <div class="cellCssContent">
            <div class="left">分析人：</div>
            <div class="right">
              {{ item.analysisUser }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="workTitle">审批流程</div>

    <div class="formBox">
      <div class="formItem">
        <div class="cellCss">
          <div class="cellCssContent">
            <div class="left">作业负责人意见</div>
            <div class="right">
              {{ formInfoObj.principalImage?.[0].peopleName }}
            </div>
          </div>
          <div class="cellCssContent2">
            <div>签字：</div>
            <div>
              <img
                class="showImg"
                :src="formInfoObj.principalImage?.[0].peopleImage"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
      <div
        class="formItem"
        v-for="item in formInfoObj.processList"
        :key="item.id"
      >
        <div class="cellCss">
          <div class="cellCssContent">
            <div class="left">{{ item.nodeName }}</div>
            <div class="right">
              {{ item.approverName }}
            </div>
          </div>
          <div class="cellCssContent2">
            <div>签字：</div>
            <div>
              <img class="showImg" :src="item.signature" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <van-popup closeable round v-model="showDialog" position="bottom">
      <div class="popBox">
        <div class="popTitle">安全措施确认</div>
        <div
          class="formItem"
          v-for="item in formInfoObj.ticketSecurityMethods"
          :key="item.id"
        >
          <div class="cellCss">
            <div class="cellCssTitle">
              {{ item.name }}
            </div>
            <div class="cellCssContent">
              <div class="right">
                涉及：
                <span v-if="item.isInvolved == true" style="color: #0077ff"
                  >是</span
                >
                <span v-else style="color: #ff6e00">否</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { getTicketDetailApi } from '@/api/ticket'
import { workModeListApi, riskIdentificationListApi } from '@/api/dictionary.js'

import '@/css/form.scss'

import navBar from '@/components/navBar.vue'

export default {
  name: 'workResponsible',
  props: {},
  components: { navBar },
  data() {
    return {
      wordId: '',
      code: '',
      codeName: '',
      formInfoObj: {},
      isLoginMsg: {},
      workMethodOptions: [],
      check: [],
      showDialog: false,
      measureList: [],
      dangerOptions: [],
      check2: [],
      specialList: [],
      queryData: {
        activeIndex: 1,
      },
    }
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      // 确保每次进入都重置数据
      vm.formInfoObj = {}
      // vm.getTicketDetailApi()
      window.scrollTo(0, 0)
    })
  },
  mounted() {
    window.addEventListener('pageshow', (event) => {
      if (event.persisted) {
        // 如果是从缓存中恢复的页面
        window.scrollTo(0, 0)
      }
    })
  },
  created() {
    this.wordId = this.$route.query.id
    this.code = this.$route.query.code
    this.codeName = this.$route.query.codeName

    this.getTicketDetail()
    this.isLoginMsg = JSON.parse(sessionStorage.getItem('loginInfo'))

    this.getWorkMode()
  },
  watch: {
    formInfoObj: {
      // immediate: true,
      deep: true,
      handler(newVal) {
        if (newVal.fireMethod) {
          this.check = this.parseFireWay(newVal.fireMethod)
        }
        if (newVal.riskResult) {
          this.check2 = this.parseFireWay(newVal.riskResult)
        }
        // console.log(newVal.specialHomeworkCertificates)
        this.specialList = newVal.specialHomeworkCertificates?.map((item) => {
          return {
            name: item.name,
          }
        })
      },
    },
  },
  methods: {
    parseFireWay(fireWay) {
      if (!fireWay) return []
      return Array.isArray(fireWay) ? fireWay : fireWay.split(',')
    },
    async getTicketDetail() {
      const res = await getTicketDetailApi({ id: +this.wordId })
      this.formInfoObj = res.data
      // const res3 = await securityMeasureListApi({
      //   ticketTypeCode: this.code,
      // })
      // this.measureList = res3.data.map((item) => {
      //   return {
      //     ...item,
      //     isture: true,
      //     content: item.name,
      //   }
      // })
    },
    async getWorkMode() {
      const res2 = await workModeListApi({
        ticketTypeCode: this.code,
      })
      this.workMethodOptions = res2.data

      const res3 = await riskIdentificationListApi({
        ticketTypeCode: this.code,
      })
      this.dangerOptions = res3.data
    },
  },
  computed: {},
  filters: {},
}
</script>

<style scoped lang="scss">
.container {
  background-color: #f5f6f7;
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
  padding-bottom: 60px;
}

.confirmBox {
  margin-top: 10px;
  .confirmTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .confirmBtn {
    width: 60px;
    height: 28px;
    text-align: center;
    line-height: 28px;
    border: 1px solid #dbe0e7;
    padding: 2px 6px;
    border-radius: 4px;
  }
  img {
    width: 150px;
    height: 50px;
  }
}

.sign-finish {
  width: 100vw;
  height: 90vh;
  canvas {
    border-radius: 10px;
    border: 2px dashed #ccc;
    width: 100px;
    height: 90vh;
  }
  .wrap {
    padding: 15px;
    height: 100%;
    display: flex;
    justify-content: center;
    .actionsWrap {
      width: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .canvas {
      flex: 1;
    }
    .actions {
      margin-right: 10px;
      white-space: nowrap;
      transform: rotate(90deg);
      .action-button {
        margin-left: 15px;
      }
    }
  }
}
.popBox {
  background-color: #f5f6f7;
  padding: 10px;
  .popTitle {
    font-size: 16px;
    color: #313235;
    font-weight: bold;
    padding: 10px;
  }
  .formItem {
    background-color: #fff;
    margin-bottom: 10px;
    border-radius: 5px;
    padding: 5px;
  }
}
.showImg {
  width: 100%;
}
</style>
